﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/beetlex4axios.js"></script>
    <script src="js/component.js"></script>
    <title>Beetlex samples</title>
</head>
<body>
    <div id="page">
        <page-header>

        </page-header>
        <div class="container" style="margin-top:60px;">
            <div class="row">
                <div class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">Name</label>
                        <input type="text" class="form-control" v-model="text" id="exampleInputName2" placeholder="">
                    </div>
                    <button type="button" @click="send" class="btn btn-default">Send</button>
                </div>
                <ul>
                    <li v-for="item in result">{{item}}</li>
                </ul>
            </div>
        </div>

    </div>
    <script>
        beetlex.useWebsocket();
        beetlex.websocket.receive = function (r) {
            page.result.push(r);
        };
        var model = {
            result: [],
            text: ''
        };
        var page = new Vue({
            el: '#page',
            data: model,
            methods: {
                send: function () {
                    if (this.text)
                        beetlex.websocket.sendText(this.text);
                },
            },
        });

    </script>
</body>

</html>